<template>
  <div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
      <div class="full-width" id="mul_select">
        <el-form :inline="true" ref="form" :model="form" size="small">
          <el-form-item>
            <el-input size="small" placeholder="请输入商品编码" v-model.trim="form.number" maxlength="40" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="small" placeholder="请输入商品名称" v-model.trim="form.title" maxlength="30" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-cascader size="small" placeholder="请选择商品分类" v-model="form.classIds" collapse-tags clearable :options="storeClassList" :props="defaultProps"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-select size="small" v-model="form.logoIds" placeholder="请选择商品品牌" filterable multiple :multiple-limit="10" clearable :value-key="'label'">
              <el-option v-for="item in storeLogoList" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-select size="small" v-model="form.tagIds" placeholder="请选择商品标签" filterable multiple :multiple-limit="10" clearable :value-key="'label'">
              <el-option v-for="item in storeTagList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-select size="small" v-model="form.supplyIds" placeholder="请选择供应商" filterable multiple :multiple-limit="10" clearable :value-key="'label'">
              <el-option v-for="item in storeSupplyList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input size="small" placeholder="请输入商品SKU编码" v-model.trim="form.skunumber" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="small" v-model="form.status" placeholder="请选择审核状态" filterable clearable :value-key="'label'">
              <el-option v-for="item in storeStatusList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="总销量">
            <el-col :span="8">
               <el-input-number class="numberInput" :controls="false" v-model.trim="form.minSalesNum" placeholder="请输入" :precision="0" :min="0" @keydown.native="inputNoneNumberUnpass"></el-input-number>
            </el-col>
            <el-col class="margin_left_6 margin_right_6" :span="1">——</el-col>
            <el-col :span="8" class="margin_left_6">
               <el-input-number class="numberInput" :controls="false" v-model.trim="form.maxSalesNum" placeholder="请输入" :precision="0" :min="0" @keydown.native="inputNoneNumberUnpass"></el-input-number>
            </el-col>
          </el-form-item>
          <el-form-item label="月销量">
            <el-col :span="8">
               <el-input-number class="numberInput" :controls="false" v-model.trim="form.minSalesNum30" placeholder="请输入" :precision="0" :min="0" @keydown.native="inputNoneNumberUnpass"></el-input-number>
            </el-col>
            <el-col class="margin_left_6 margin_right_6" :span="1">——</el-col>
            <el-col :span="8" class="margin_left_6">
               <el-input-number class="numberInput" :controls="false" v-model.trim="form.maxSalesNum30" placeholder="请输入" :precision="0" :min="0" @keydown.native="inputNoneNumberUnpass"></el-input-number>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" class="width_104" @click="getSkuList()">查询</el-button>
            <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="height: 40px">
        <el-upload class="fl" :action="uploadStockAction" :headers="header" :accept="'file/xlsx'" :show-file-list="false" :file-list="fileStockList" :on-change="handleChangeStock">
          <el-button  size="mini" type="warning" icon="el-icon-sold-out" v-if="roleBtns.includes('sys:stock:import') || $store.getters.isAdmin">库存导入</el-button>
        </el-upload>
        <!-- <el-button size="mini" type="warning" icon="el-icon-sold-out" @click="batchStock()" v-if="roleBtns.includes('sys:goods:unsale') || $store.getters.isAdmin">库存导入</el-button> -->
        <el-button class="fl margin" size="mini" type="primary" icon="el-icon-download" @click="outputStoreOption(1)" v-if="roleBtns.includes('sys:stock:export') || $store.getters.isAdmin">库存导出</el-button>
        <el-upload class="fl margin" :action="uploadSizeAction" :headers="header" :accept="'file/xlsx'" :show-file-list="false" :file-list="fileSizeList" :on-change="handleChangeSize">
          <el-button size="mini" type="warning" icon="el-icon-sold-out" v-if="roleBtns.includes('sys:size:import') || $store.getters.isAdmin">尺码导入</el-button>
        </el-upload>
        <!-- <el-button size="mini" type="warning" icon="el-icon-sold-out" @click="batchStock()" v-if="roleBtns.includes('sys:goods:unsale') || $store.getters.isAdmin">尺码导入</el-button> -->
        <el-button class="fl margin" size="mini" type="primary" icon="el-icon-download" @click="outputStoreOption(2)" v-if="roleBtns.includes('sys:size:export') || $store.getters.isAdmin">尺码导出</el-button>
        <!-- <el-button size="mini" type="primary" icon="el-icon-download" @click="outputStoreOption()" class="fr" v-if="roleBtns.includes('sys:goods:export') || $store.getters.isAdmin">批量导出</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="batchStoreDelete()" v-if="roleBtns.includes('sys:goods:selectdelete') || $store.getters.isAdmin">批量删除</el-button> -->
      </div>
      <span style="color: #606266ba;">请注意不要重复上传数据</span>
      <!-- 数据table -->
      <el-table class="margin_top_20" ref="multipleTableContent" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading" @sort-change="sortChange" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="skuNo" label="sku编码" width="150">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.skuNo">{{scope.row.skuNo}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="imgUrl" label="sku图片" width="90">
          <template slot-scope="scope">
            <img :src="imgBaseUrl + scope.row.imgUrl" class="shop_avator" v-if="scope.row.imgUrl"/>
          </template>
        </el-table-column>
         <el-table-column prop="propertyRelationsList" label="属性-属性值" width="210">
          <template slot-scope="scope">
            <!-- :title="scope.row.title" -->
            <div class="flex align-center flex-start" :class="{'margin_top_10': index > 0}" v-for="(item, index) in scope.row.propertyRelationsList" :key="index" >
              <div class="text-ellipsis" style="min-width: 7em; max-width: 7em;word-break: keep-all;" :title="item.property">{{item.property}}：</div>
              <div class="text-ellipsis" :title="item.propertyValue">{{item.propertyValue}}</div>
            </div>
              <!-- <div class="">{{item.property}}: {{item.propertyValue}}</div> -->
          </template>
        </el-table-column>
        <el-table-column prop="goodsNo" label="商品编码" width="150">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.goodsNo">{{scope.row.goodsNo}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.title">{{scope.row.title}}</div>
          </template>
        </el-table-column>
         <el-table-column prop="category" label="商品分类">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.category">{{scope.row.category}}</div>
          </template>
        </el-table-column>
         <el-table-column prop="supplier" label="商品供应商">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.supplier">{{scope.row.supplier}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="qty" label="SKU库存">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.qty">{{scope.row.qty}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="salesNum" label="SKU总销量" width="80" sortable>
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.salesNum" v-if="scope.row.salesNum">{{scope.row.salesNum}}</div>
            <div v-else>0</div>
          </template>
        </el-table-column>
        <el-table-column prop="salesNum30" label="SKU月销量" width="80" sortable>
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.qty" v-if="scope.row.salesNum30">{{scope.row.salesNum30}}</div>
            <div v-else>0</div>
          </template>
        </el-table-column>
        <el-table-column prop="salesVolume" label="SKU总销售额" width="80" sortable>
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.salesVolume" v-if="scope.row.salesVolume">{{scope.row.salesVolume}}</div>
            <div v-else>0</div>
          </template>
        </el-table-column>
        <el-table-column prop="salesVolume30" label="SKU月销售额" width="80" sortable>
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.salesVolume30" v-if="scope.row.salesVolume30">{{scope.row.salesVolume30}}</div>
            <div v-else>0</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">未审核</div>
            <div v-else-if="scope.row.status == 1">审核中</div>
            <div v-else-if="scope.row.status == 2">审核通过</div>
            <div v-else>审核失败</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="tagList" label="商品标签">
          <template slot-scope="scope">
            <span v-for="(tag, index) of scope.row.tagList" :key="scope.row.id + index"><label v-if="index > 0">；</label>{{tag}}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="userName" label="创建人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable></el-table-column> -->
        <el-table-column prop="shelvesStatus" label="上下架" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.shelvesStatus == 0">下架</div>
            <div v-else-if="scope.row.shelvesStatus == 1">上架</div>
            <div v-else>待售</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="showStore(scope.row.goodsId)">查看</button>
          </template>
        </el-table-column>
      </el-table>

      <div class="text-center">
        <br>
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <el-form :label-width="'5em'">
        <el-form-item label="上传文件">
         <app-uploader-file title="上传文件" :initFiles="fileList" :accept="'file/*'" :multiple="true" :file-format="fileFormat" @change="handleImagesOption($event)"></app-uploader-file>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
    <message-dialog :dialogTableVisible.sync="dialogTableVisible" :message="objectData"></message-dialog>
  </div>
</template>

<script>
import Setting from '@/settings';
import { getToken } from '@/utils/Token';
import MessageDialog from '@/components/MessageDialog/index'
import AppUploaderFile from '@/components/AppUploaderFile/index'
import { mapGetters } from 'vuex';
import { GetSkuList, GetStoreBrandAllListByParams, GetStoreTagAllListByParams, GetStoreSupplyListAll, GetStoreClassList } from '@/views/store-management/services/index';
export default {
  name: 'StoreList',
  components: {
    AppUploaderFile,
    MessageDialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogTableVisible: false,
      header:{
        ContentType:"multipart/form-data",
        Authorization: getToken()
        },
      uploadSizeAction: `${process.env.VUE_APP_BASE_API}/cloudApi/goods/excel/importSkuSize`,//尺码导入地址
      uploadStockAction: `${process.env.VUE_APP_BASE_API}/cloudApi/goods/stock/importStock`, // 库存导入地址
      objectData: {
        date: '2016-05-03',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      },
      // 查询条件
      sort: null,
      sortField: null,
      form: {
        title: null,
        number: null,
        skunumber: null,
        classIds: [],
        logoIds: [],
        status: null,
        tagIds: [],
        supplyIds: [],
        source: null,
        minSalesNum: undefined,
        maxSalesNum: undefined,
        minSalesNum30: undefined,
        maxSalesNum30: undefined,
      },
      fileStockList: [],
      fileSizeList: [],
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      loading: false,
      uploadUrl: `${process.env.VUE_APP_BASE_API}/cloudApi/datacenter/file/uploadFile`,

      pageData: [],
      pageCount: 0,
      // 查询条件下拉数据列表
      storeTagList: [],
      storeLogoList: [],
      storeStatusList: [
        { value: 0, label: '未审核' },
        { value: 1, label: '审核中' },
        { value: 2, label: '审核通过' },
        { value: 3, label: '审核失败' }
      ],
      storeSourceList: [
        // { value: '0', label: '全部' },
        { value: '1', label: '我创建的' },
        { value: '2', label: '供应链下发' }
      ],
      storeSupplyList: [],
      storeClassList: [],
      // table选中数组
      multipleSelection: [],
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
      defaultProps: {
        value: 'id',
        label: 'title',
        children: 'goodsCategoryModelList',
        multiple: true
      },
      userId: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).id : '1',
      fileFormat: ['docx', 'xlsx', 'doc'],
      fileList: [],
      filesList: []
    }
  },
  created() {
    this.getStoreTagList();
    this.getStoreLogoList();
    this.getStoreSupplyList();
    this.getStoreClassList();
    // 获取商品列表
    this.getSkuList();
  },
  activated() {
    this.getSkuList();
  },
  computed: {
    ...mapGetters(['roleBtns'])
  },
  methods: {
    handleChangeStock(file, fileList) {
      if(file.response) { 
      if(file.response.code == 200) {
        var newData = []
        const h = this.$createElement;
        if(file.response.data.length) {
          newData.push(h('p', {style: 'word-break: break-word;'}, '正常数据已上传至系统，以下是错误数据！'))
          newData.push(h('p', {style: 'word-break: break-word;'}, '关闭窗口时请留存信息！'))
        for (let i = 0; i < file.response.data.length; i++ ) {
          newData.push(h('p', {style: 'word-break: break-word;'}, `${'第' + file.response.data[i].row + '行：' + file.response.data[i].msg}`))
        }
        console.log(newData)
        this.$msgbox({
          title: '上传成功',
          type: 'success',
          lockScroll: false,
          message: h('div', {style: 'text-align: center;max-height: 400px;overflow-y: auto' }, newData ),
          showCancelButton: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                done();
            } else {
              done();
            }
          }
        })
        }else {
        this.$message.success("库存导入成功！")
        }
        this.getSkuList()
      }else {
        var newData = []
        const h = this.$createElement;
        for (let i = 0; i < file.response.data.length; i++ ) {
          newData.push(h('p', {style: 'word-break: break-word;'}, `${'第' + file.response.data[i].row + '行：' + file.response.data[i].msg}`))
        }
        console.log(newData)
        this.$msgbox({
          title: '上传失败',
          type: 'error',
          lockScroll: false,
          message: h('div', {style: 'text-align: center;max-height: 400px;overflow-y: auto' }, newData ),
          showCancelButton: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                done();
            } else {
              done();
            }
          }
        })
      }
      }else {
        this.fileStockList = fileList.slice(-3);
      }
      
    },
    handleChangeSize(file, fileList) {
      if(file.response) {
      if(file.response.code == 200) {
        var newData = []
        const h = this.$createElement;
        if(file.response.data.length) {
          newData.push(h('p', {style: 'word-break: break-word;'}, '正常数据已上传至系统，以下是错误数据！'))
          newData.push(h('p', {style: 'word-break: break-word;'}, '关闭窗口时请留存信息！'))
        for (let i = 0; i < file.response.data.length; i++ ) {
          newData.push(h('p', {style: 'word-break: break-word;'}, `${'第' + file.response.data[i].row + '行：' + file.response.data[i].msg}`))
        }
        console.log(newData)
        this.$msgbox({
          title: '上传成功',
          type: 'success',
          lockScroll: false,
          message: h('div', {style: 'text-align: center;max-height: 400px;overflow-y: auto' }, newData ),
          showCancelButton: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                done();
            } else {
              done();
            }
          }
        })
        }else {
        this.$message.success("尺码导入成功！")
        }
        this.getSkuList()
      }else {
        var newData = []
        const h = this.$createElement;
        for (let i = 0; i < file.response.data.length; i++ ) {
          newData.push(h('p', {style: 'word-break: break-word;'}, `${'第' + file.response.data[i].row + '行：' + file.response.data[i].msg}`))
        }
        console.log(newData)
        this.$msgbox({
          title: '上传失败',
          type: 'error',
          lockScroll: false,
          message: h('div', {style: 'text-align: center;max-height: 400px;overflow-y: auto' }, newData ),
          showCancelButton: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                done();
            } else {
              done();
            }
          }
        })
      }
      }else {
        this.fileSizeList = fileList.slice(-3);
      }
    },
    // pointer() {
    //   this.dialogTableVisible = true
    // },
    // 库存批量导
    batchStock() {
      this.dialogVisible = true
    },
    // 文件上传后的数据返回
    handleImagesOption(value) {
      console.log(value)
      this.filesList = value
    },
    determine() {
      console.log('this.filesList',this.filesList)
      this.dialogVisible = false
    },
    sortChange(value) {
      this.getSkuList(value.prop, value.order == 'descending');
    },
    // 商品查看页面跳转
    showStore(rowId) {
      this.$router.push({
        name: 'StoreDetail',
        params: { id: rowId }
      })
    },
    // 获取数据API
    getSkuList(sortField, sort) {
      const classIds = this.form.classIds.map(item => item[item.length - 1]).join(',');
      this.loading = true;
      const queryData = {
        // 商品名称
        title: this.form.title,
        goodsNo: this.form.number,
        skuNo: this.form.skunumber,
        status: this.form.status,
        // 是否上下架
        // shelvesStatus: this.form.status,
        //商品标签
        categoryIds: classIds,
        brandIds: this.form.logoIds.join(','),
        // tagIds: this.form.tagIds.join(','),
        supplierIds: this.form.supplyIds.join(','),
        minSalesNum: this.form.minSalesNum,
        maxSalesNum: this.form.maxSalesNum,
        minSalesNum30: this.form.minSalesNum30,
        maxSalesNum30: this.form.maxSalesNum30,
        // mchId: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1', // 商户id
        // 分页
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        sort: null,
        sortField: null,
        source: this.form.source?this.form.source: '3',
        
      };
      if (sort == false || sort) {
        queryData.sort = sort;
        this.sort = sort;
      } else {
        this.sort = null;
      }
      if (sortField) {
        queryData.sortField = sortField;
        this.sortField = sortField;
      } else {
        this.sortField = null;
      }
      GetSkuList(queryData)
      .finally(() => this.loading = false)
      .then(data => {
        if (data.code != 200) {
          this.$message.error('加载失败，请重新刷新列表');
          return;
        }
        this.pageData = (data.data.list && data.data.list.length) ? data.data.list.map(li => {
          li['shelvesStatusBoolean'] = !!li.shelvesStatus;
          if (li.creatorId == this.userId || this.$store.getters.isAdmin) {
            li['isSelf'] = true;
          }
          return li;
        }) : [];
        this.pageCount = data.data.total;
        if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
          this.pageIndex = 1;
          this.getSkuList();
        }
      })
    },
    // 查询条件清空
    resetOption() {
      // 清空条件
      this.form.title = null;
      this.form.number = null;
      this.form.skunumber = null;
      this.form.classIds = [];
      this.form.logoIds = [];
      this.form.status = null;
      this.form.tagIds = [];
      this.form.supplyIds = [];
      this.form.source = null;
      this.form.minSalesNum = undefined;
      this.form.maxSalesNum = undefined;
      this.form.minSalesNum30 = undefined;
      this.form.maxSalesNum30 = undefined;
      this.pageIndex = 1;
      this.getSkuList();
    },
    // 分页操作
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getSkuList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getSkuList();
    },
    // 批量导出功能
    outputStoreOption(type) {
      // if (!this.multipleSelection || !this.multipleSelection.length) {
      //   this.$message.warning('请选择需要导出的商品!');
      //   return;
      // }
      const classIds = this.form.classIds.map(item => item[item.length - 1]).join(',');
      this.loading = true;
      const queryData = {
        // 商品名称
        title: this.form.title,
        goodsNo: this.form.number,
        skuNo: this.form.skunumber,
        // 是否上下架
        status: this.form.status,
        //商品标签
        categoryIds: classIds,
        brandIds: this.form.logoIds.join(','),
        // tagIds: this.form.tagIds.join(','),
        supplierIds: this.form.supplyIds.join(','),
        source: 3,
        // mchId: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1', // 商户id
        targetIds: this.multipleSelection.map(item => item.id).join(',')
      };
      if(type == 1) {
        this.blobAxiosApi('get', '/cloudApi/goods/stock/exportStock', queryData, '库存导出文件.zip')
      .finally(() => this.loading = false)
      
      }else {
        this.blobAxiosApi('get', '/cloudApi/goods/excel/exportSkuSize', queryData, '尺码导出文件.xlsx')
      .finally(() => this.loading = false)
      }
      this.getSkuList()
    },
    // table全选按钮操作
    handleSelectionChange(selectlist) {
      // 及时更新到数组当中
      this.multipleSelection = selectlist;
    },
    // 上架/下架操作
    switchChange(event, rowData) {
      ChangeStoreItemStatus({
        id: rowData.id,
        status: event ? 1 : 0,
      })
      .then(data => {
        if (data.code == 200) {
          this.$message.success((event ? '上架' : '下架') + '成功!');
          this.getSkuList();
        } else {
          this.$message.error((event ? '上架' : '下架') + '失败!');
          rowData.shelvesStatusBoolean = !rowData.shelvesStatusBoolean;
        }
      })
      .catch(error => {
        rowData.shelvesStatusBoolean = !rowData.shelvesStatusBoolean;
      })
    },
    // 删除商品操作
    deleteStoreOption(rowId) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            DeleteStoreItem({ id: rowId })
            .then(data => {
              instance.confirmButtonLoading = false;
              if (data.code == 200) {
                done();
                this.$message.success('删除成功!');
                this.getSkuList();
              } else {
                this.$message.error('删除失败!');
              }
            })
            .catch(error => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      })
    },

    // 批量操作
    // 批量上架
    batchStoreOption(status) {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.warning('请选择需要' + (status == '1' ? '上' : '下') + '架的商品!');
        return;
      }
      const allSelf = this.multipleSelection.every(item => item.isSelf);
      if (!allSelf) {
        this.$message.warning('不可操作非本账户创建的商品的状态!');
        return;
      }
      ChangeStoreItemListStatusBatch({
        targetIds: this.multipleSelection.map(item => item.id).join(','),
        status: status
      })
       .then(data => {
        if (data.code == 200) {
          this.$message.success('批量' + (status == '1' ? '上' : '下') + '架成功!');
          this.getSkuList();
        }
      })
      .catch(error => {
        this.$message.error('批量' + (status == '1' ? '上' : '下') + '架失败!');
      })
    },
    // 批量删除操作
    batchStoreDelete() {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.warning('请选择需要删除的商品!');
        return;
      }
      const allSelf = this.multipleSelection.every(item => item.isSelf);
      if (!allSelf) {
        this.$message.warning('不可删除非本账户创建的商品!');
        return;
      }
      this.$confirm('此操作将永久删除选中商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '加载中...';
            DeleteStoreItemBatch({ targetIds: this.multipleSelection.map(item => item.id).join(',') })
            .then(data => {
              instance.confirmButtonLoading = false;
              if (data.code == 200) {
                done();
                this.$message.success('删除成功!');
                this.getSkuList();
              } else {
                this.$message.error('删除失败!');
              }
            })
            .catch(error => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      })
    },

    // 查询条件支持
    // 获取商品品牌
    async getStoreLogoList() {
      const data = await GetStoreBrandAllListByParams({});
      this.storeLogoList = data.data.map(item => {
        item.value = item.id;
        item.label = item.name;
        return item;
      });
    },
    // 获取商品标签
    async getStoreTagList() {
      const data = await GetStoreTagAllListByParams({});
      this.storeTagList = data.data.map(item => {
        item.value = item.id;
        item.label = item.name;
        return item;
      });
    },
    getStoreSupplyList() {
      GetStoreSupplyListAll({status: 1})
      .then(data => {
        this.storeSupplyList = data.data.map(item => {
          item.value = item.id;
          item.label = item.name;
          return item;
        });
      })
    },
    getStoreClassList() {
      GetStoreClassList()
      .then(data => {
        this.storeClassList = data.data;
      })
    },

    // 跳转支持
    // 商品新增页面跳转
    addStore() {
      this.$router.push({
        name: 'StoreAdd'
      })
    },
    // 商品查看页面跳转
    showStore(rowId) {
      this.$router.push({
        name: 'StoreDetail',
        params: { id: rowId }
      })
    },
    // 商品编辑页面跳转
    editStore(rowId, step) {
      this.$router.push({
        name: 'StoreEdit',
        params: { id: rowId },
        query: { nextStep: step }
      })
    },
    // 商品SKU页面跳转
    skuStore(rowId) {
      this.$router.push({
        name: 'CheckSku',
        params: { id: rowId }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.shop_avator {
  width: 64px;
  height: 64px;
  vertical-align: middle;
}

::v-deep .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
	height: 33px; //这里高度根据需求自己设定
}
::v-deep .el-select {
  height: 30px !important;
}
::v-deep .el-select__tags {
  height: 100%;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
}
::v-deep .el-select__tags::-webkit-scrollbar{
    display: none;
} 
::v-deep .el-cascader__tags {
	display: inline-flex;
	margin-right: 60px;
	flex-wrap: nowrap;
}

::v-deep .el-form .el-input {
  width: 224px !important;
}

::v-deep .numberInput .el-input {
    width: 100px !important;
}

::v-deep .el-input-number--small {
  width: 100%;
} 

.width_104 {
  width: 104px;
}
.margin {
  margin-left: 10px;
}
</style>

